<!-- 用户管理 -->
<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      :ref="refName"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名称" prop="username" class="addUser-inline">
        <el-input
          v-model="ruleForm.username"
          autocomplete="new-password"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="真实姓名"
        prop="real_name"
        class="addUser-inline right"
      >
        <el-input
          v-model="ruleForm.real_name"
          autocomplete="new-password"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender" class="addUser-inline">
        <el-select v-model="ruleForm.gender" placeholder="请选择性别">
          <el-option label="保密" value="UNKNOWN"></el-option>
          <el-option label="男" value="MALE"></el-option>
          <el-option label="女" value="MALE"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄" prop="age" class="addUser-inline right">
        <el-input-number
          v-model="ruleForm.age"
          controls-position="right"
          :min="16"
          :max="70"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="所在单位" prop="common_name">
        <el-input
          v-model="ruleForm.common_name"
          autocomplete="new-password"
        ></el-input>
      </el-form-item>
      <el-form-item label="电话号码" prop="phone_number">
        <el-input
          v-model="ruleForm.phone_number"
          autocomplete="new-password"
        ></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱" prop="email">
        <el-input v-model="ruleForm.email" autocomplete="new-password">
        </el-input>
      </el-form-item>
      <el-form-item label="QQ号码" prop="qq_number">
        <el-input
          v-model="ruleForm.qq_number"
          autocomplete="new-password"
        ></el-input>
      </el-form-item>
      <el-form-item label="微信号码" prop="wechat_number">
        <el-input
          v-model="ruleForm.wechat_number"
          autocomplete="new-password"
        ></el-input>
      </el-form-item>
      <el-form-item label="自我介绍" prop="description">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="ruleForm.description"
          maxlength="50"
          show-word-limit
        >
        </el-input>
      </el-form-item>
      <el-button type="primary" :loading="true" v-if="loading" class="save"
        >加载中</el-button
      >
      <el-button type="primary" @click="saveChange()" v-else class="save"
        >保存</el-button
      >
      <el-button @click="goBack()">关闭</el-button>
    </el-form>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
  props: {
    ruleForm:Object,
    getUser:Function,
    goBack:Function,
  },
  data() {
    var checkphone = (rule, value, callback) => {
      // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
      if (value == "") {
        callback(new Error("请输入手机号"));
      } else if (!this.isCellPhone(value)) {
        //引入methods中封装的检查手机格式的方法
        callback(new Error("请输入正确的手机号!"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      //修改用户信息
      refName: "changeSelf",
      rules: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          { min: 2, message: "长度不少于2个字符", trigger: "blur" },
        ],
        phone_number: [
          { required: true, validator: checkphone, trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        authority: {
          required: true,
          message: "请选择用户身份",
          trigger: "blur",
        },
        real_name: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
          {
            min: 2,
            max: 5,
            message: "长度在2到5个字符，不能包含空格",
            trigger: "blur",
          },
        ],
        common_name: {
          required: true,
          message: "请输入学校名称",
          trigger: "blur",
        },
        department: { message: "请输入学院名", trigger: "blur" },
        class_name: { message: "请输入班级名", trigger: "blur" },
        description: [
          {
            required: true,
            message: "请输入自我介绍，内容不少于20字",
            trigger: "blur",
          },
        ],
        age: [
          {
            required: true,
            message: "年龄不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    ...mapActions('personCenter',[
      'change_User'
    ]),
    //检查手机号
    isCellPhone(val) {
      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
        return false;
      } else {
        return true;
      }
    },
    //修改用户信息
    async saveChange() {
      this.loading = true;
      let status = await this['change_User']({id:this.ruleForm.id,ruleForm:this.ruleForm});
      if (status == 200 || status == 204) {
        this.$message({
          type: "success",
          message: "修改成功!",
        });
        this.loading = false;
        setTimeout(() => {
          this.getUser();
        }, 500);
      } else {
        this.loading = false;
        this.$message({
          type: "warning",
          message: "用户名、手机号、电子邮箱重复！",
        });
      }
    },
  },
};
</script>

<style lang='scss'>
</style>
